<template>
  <div class="assign-menu">
    <el-dialog title="分配菜单" :visible.sync="isVisible" width="45%" :before-close="handleCloseDialog">
      <treeTransfer class="assign-transfer"
                    :title="this.transferTitle"
                    :from_data="assignMenuFromData"
                    :to_data="assignMenuToData"
                    :defaultProps="defaultProps"
                    accordion
                    filter
                    :defaultCheckedKeys="defaultCheckedKeys"
                    :transferOpenNode="false"></treeTransfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDialog">取 消</el-button>
        <el-button type="primary" @click="handleUpdateMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import treeTransfer from 'el-tree-transfer'
import { mapState } from 'vuex'
import store from '@/store'
import { GetDefaultMenuByIdApi, GetRoleMenuApi, UpdateRoleMenuApi } from '@/request/role/role-api'

export default {
  components: {
    treeTransfer,
  },
  data () {
    return {
      transferTitle: ['选择区域', '已选区域'],
      assignMenuFromData: [],
      assignMenuToData:[],
      defaultCheckedKeys:[],
      menuIds: [],
      defaultProps: {
        label: 'title',
        children: 'childrenItem'
      }
    }
  },
  methods: {
    closeDialog () {
      store.commit('roleMenu/changeIsVisible', false)
      store.commit('roleMenu/changeRoleMenuId', null)
      this.assignMenuFromData=[]
      this.assignMenuToData=[]
      this.menuIds=[]
      this.defaultCheckedKeys=[]
      this.$parent.init()
    },
    handleCloseDialog () {
      this.$confirm('确定取消操作吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(() => {
        this.closeDialog()
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },
    async getRoleMenu (id) {
      let res = await GetRoleMenuApi()
      if (res.code === 200) {
        this.assignMenuFromData = res.data
      } else {

        this.$message.error("初始化菜单失败")
      }
      let defaultMenu=await  GetDefaultMenuByIdApi(id)
      if (defaultMenu.code===200){
        this.defaultCheckedKeys=defaultMenu.data
      }else{
        this.$message.error("获取已存在菜单失败！")
      }
    },async handleUpdateMenu () {
      //遍历列表生成菜单
      this.assignMenuToData.forEach(item => {
        this.addMenuIds(item)
      })
      const data={
        id:this.roleId,
        ids:this.menuIds
      }
      let res = await UpdateRoleMenuApi(data)
      if (res.code===200){
        this.$notify.success({title:'修改成功',message:"修改角色菜单成功"})
      }else {
        this.$message.error("修改角色菜单失败！")
      }
      this.closeDialog()
    } , addMenuIds(item){
      this.menuIds.push(item.id)
      if (item.childrenItem===null){
        return
      }
      item.childrenItem.forEach(child=>{
        this.addMenuIds(child)
      })
    }
  },
  computed: {
    listenRoleId () {
      return store.state.roleMenu.roleId
    },
    ...mapState({
      isVisible: state => state.roleMenu.isVisible,
      roleId: state => state.roleMenu.roleId
    })
  },
  watch: {
    listenRoleId: {
      immediate: true,
      handler (val, oldval) {
        if (val) {
          this.getRoleMenu(val)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">

/deep/ .assign-transfer {
  width: 80% !important;
  height: 400px !important;
  margin: 0 auto;
  }

/deep/ .el-dialog {
  border-radius: 10px;
}
</style>
